<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>家庭作业</title>
    <script src='./vue.global.js'></script>

    <!-- main -->
    <link rel="stylesheet" href="./css/main.css">

    <!-- dynamic -->
    <link rel="stylesheet" href="./css/dynamic.css">
</head>

<body>
    <div id='app'>
        <div class="wrapper">
            
            <ul class="tabs">
                <li 
                v-for="(t,index) in tabs" 
                @click="onTabClick(t.name,index)"
                :class="{active:index===currentIndex}"
                >{{t.text}}</li>
            </ul>

            <div class="content">
                <!-- 具体加载哪个组件取决于is对应的值 -->
                <component :is="currentComponent"></component>
            </div>
        </div>
    </div>

    <script>
        const app = Vue.createApp({
            data() {
                return {
                    tabs: [
                        // {name:"组件名",text:"标签文本"}
                        { name: "dynamic", text: "动态组件" },
                        { name: "async", text: "异步组件" },
                        { name: "mixin", text: "全局mixin" },
                    ],

                    // 当前选中的组件
                    currentComponent: "demo-dynamic",
                    currentIndex:0
                }
            },
            methods: {
                onTabClick(name,index){
                    this.currentComponent = 'demo-'+name
                    this.currentIndex = index
                }
            },
            computed: {}
        })
    </script>


    <!-- /* 定义子组件:动态组件案例 */ -->
    <script src="./js/dynamic.js"></script>

    <!-- /* 定义子组件:异步组件案例 */ -->
    <script src="./js/async.js"></script>

    <!-- mixin组件案例 -->
    <script src="./js/mixin.js"></script>

    <script>    
        // 将根组件挂载到指定的DOM中
        app.mount('#app')
    </script>

</body>

</html>